<template>
  <div class="bigbox">
    <div class="search">
      <span class="icon bi bi-search"></span>
      <input type="text" placeholder="搜索商品信息" v-model = 'inputV' @keydown.enter = 'search'/>
      <div class="button" @click="listFun">
        <span class="iconfont icon-liebiaoshipailie" v-if="islist"></span>
        <span class="iconfont icon-kapianshipailie" v-if="!islist"></span>
      </div>
    </div>
    <div class="tab">
      <div class="tab_item active">
        <span>{{goodsName}}</span>
      </div>
      <div class="tab_item" @click="tab1">
        <span>价格</span>
        <div class="ico">
          <span
            class="iconfont icon-shangjiantou"
            :class="{ active: istab1 == 1 }"
          ></span>
          <span
            class="iconfont icon-xiajiantou"
            :class="{ active: istab1 == 2 }"
          ></span>
        </div>
      </div>
      <div class="tab_item" @click="tab2">
        <span>销量</span>
        <div class="ico">
          <span
            class="iconfont icon-shangjiantou"
            :class="{ active: istab2 == 1 }"
          ></span>
          <span
            class="iconfont icon-xiajiantou"
            :class="{ active: istab2 == 2 }"
          ></span>
        </div>
      </div>
      <div class="tab_item" @click="newG">
        <span>新品</span>
      </div>
    </div>
    <div class="content" :class="{liebiao: islist, kapian : !islist}">
      <ul v-if="goodsList.length>0 && !iswait">
        <li v-for="item in goodsList" v-bind:key = item.id>
          <router-link :to="{path : '/home/detail' , query : {id : item.id}}">
          <div class="img">
            <img
              :src="item.image"
              v-on:error="dosomething($event)"
              alt=""
            />
          </div>
          <div class="text">
            <div class="title">
              <p>{{item.store_name}}</p>
            </div>
            <div class="price">{{item.price}}</div>
            <div class="bottom">
              <div class="VipPrice">
                <span>{{item.vip_price}}</span>
                <img
                  src=""
                  alt=""
                />
              </div>
              <div class="sale">已售{{item.sales}}{{item.unit_name}}</div>
            </div>
          </div>
          </router-link>
        </li>
      </ul>
      <ul class="no">
        <nodata v-if="goodsList.length == 0 && !iswait"></nodata>
      </ul>
      <ul class="no">
        <wait v-if="iswait"></wait>
      </ul>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
import { get } from "@/utils/http";
import nodata from "@/components/nodata";
import wait from "@/components/wait";
export default {
  data() {
    return {
      islist: true,
      istab1: 0,
      istab2: 0,
      goodsID : 0,
      goodsName: '',
      inputV : '',
      goodsList : [],
      isPdesc : "asc",
      isOdesc : 'asc',
      iswait : true,
    };
  },
  methods: {
    listFun() {
      this.islist = !this.islist;
    },
    tab1() {
      this.istab1++;
      this.istab1 = this.istab1 >= 3 ? 0 : this.istab1;
      if(this.istab1 == 2){
        this.isPdesc = 'desc';
        // console.log("降")
      }else{
        this.isPdesc = 'asc';
        // console.log("升")
      }
      // console.log(this.goodsName,this.goodsID,this.isPdesc,this.isOdesc)
      this.init(this.goodsName,this.goodsID,this.isPdesc,this.isOdesc);
    },
    tab2() {
      this.istab2++;
      this.istab2 = this.istab2 >= 3 ? 0 : this.istab2;
      if(this.istab2 == 2){
        this.isOdesc = 'desc';
        // console.log("降")
      }else{
        this.isOdesc = 'asc';
        // console.log("升")
      }
      // console.log(this.goodsName,this.goodsID,this.isPdesc,this.isOdesc)
      this.init(this.goodsName,this.goodsID,this.isPdesc,this.isOdesc);
    },
    init(keyN,keyId,priceO = 'asc',salesO = 'asc') {
      this.iswait = true;
      // console.log(keyId,priceO,salesO)
      get(`api/products?page=1&limit=8&keyword=&sid=${keyId}&news=0&priceOrder=${priceO}&salesOrder=${salesO}`).then((response) => {
        let res = response.data;
        if (res.status == 200) {
          let data = res.data;
          // this.$store.dispatch("search/sethotAsync", data);
          // console.log(data);
          this.goodsList = data;
          // console.log(priceO,salesO)
          this.iswait = false;
        }
      });
    },
    search(){
      // console.log(this.inputV);
      this.goodsName = this.inputV;


      this.iswait = true;
      // console.log(keyId,priceO,salesO)
      get(`api/products?page=1&limit=8&keyword=${this.goodsName}&sid=&news=0&priceOrder=asc&salesOrder=asc`).then((response) => {
        let res = response.data;
        if (res.status == 200) {
          let data = res.data;
          // this.$store.dispatch("search/sethotAsync", data);
          // console.log(data);
          this.goodsList = data;
          // console.log(priceO,salesO)
          this.iswait = false;
        }
      });



      this.inputV = '';
    },
    dosomething: function (e) {
        e.currentTarget.src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F01%2F37%2F92%2F40573c69065b76e.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647747238&t=e2ac665f666780d32ec1e60b4ceb233f"
      },
    newG(){
      this.init(this.goodsName,'',this.isPdesc,this.isOdesc);
    }
  },
  created() {
    // console.log($('.bigbox').width())
    // console.log(this.$route.query.id);
    // console.log(this.$route.query.name);
    this.goodsID = this.$route.query.id || '31';
    this.goodsName = this.$route.query.name || "洗衣机";
    this.init(this.goodsName,this.goodsID);
  },
  components:{
    nodata,
    wait,
  }
};
</script>
<style lang="less" scoped>
@import "../assets/font/bootstrap-icons.css";
@import "../assets/less/variable.less";
@import "../assets/font/font_icon2/iconfont.css";
.bigbox {
  padding-top: 90px;
  // background-color: #e0e0e0;
  min-height: 100px;
  width: 100%;
  .search {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: @bgColor2;
    height: 50px;
    padding: 10px 0px 10px 20px;
    box-sizing: border-box;
    display: flex;
    input {
      display: block;
      height: 100%;
      flex-basis: 80%;
      outline: none;
      border: 0;
      // background-color: #eee;
      border-radius: 15px;
      padding-left: 35px;
    }
    .icon {
      position: absolute;
      font-size: 16px;
      top: 50%;
      transform: translateY(-50%);
      left: 30px;
    }
    .button {
      flex-basis: 20%;
      font-size: 16px;
      text-align: center;
      line-height: 30px;
      .iconfont {
        font-size: 24px;
        color: white;
      }
    }
  }
  .tab {
    position: fixed;
    top: 50px;
    width: 100%;
    background: white;
    display: flex;
    padding: 10px;
    font-size: 18px;
    height: 40px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    .tab_item {
      flex-basis: 25%;
      text-align: center;
      position: relative;
      .ico {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        span {
          display: block;
          font-size: 18px;
          height: 7px;
          color: #ccc;
          transform: scale(0.5);
        }
        .iconfont.active {
          color: @color4;
        }
      }
    }
    .tab_item.active {
      color: @color4;
    }
  }
  .liebiao {
    ul {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      li {
        flex-basis: 48%;
        width: 48%;
        padding-bottom: 5px;
        background: #f5f5f5;
        margin-bottom: 10px;
        .img {
          padding: 0;
          width: 100%;
          img {
            width: 100%;
          }
        }
        .text {
          .title,.price,.VipPrice,.sale {
            box-sizing: border-box;
            padding: 5px 8px 3px;
          }
        }
      }
    }
  }
  .kapian {
    ul {
      li {
        a{
          width: 100%;
          display: flex;
          padding: 10px;
          justify-content: space-between;
          margin-bottom: 2px;
          background-color: white;
          border-bottom: 1px solid #eee;
          box-sizing: border-box;
            .img {
          width: 25%;
          flex-basis: 25%;
          img {
            width: 100%;
            border-radius: 5px;
          }
        }
        .text {
          width: 75%;
          flex-basis: 75%;
          padding: 0 15px;
          box-sizing: border-box;
          .title {
            margin-bottom: 15px;
          }
          .price {
            margin-bottom: 5px;
          }
          .bottom{
            display: flex;
            justify-content: space-between;
            >div{
              height: 20px;
              line-height: 20px;
            }
          }
        }
        }
        
      }
    }
  }
  .content {
    width: 100%;
    ul {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      li {
        border-radius: 5px;
        box-sizing: border-box;
        .title {
          width: 100%;
          // margin-top: 8px;
          p {
            font-size: 16px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
        .price {
          color: @color4;
          font-weight: bold;
        }
        .VipPrice {
          span {
            font-size: 15px;
            font-weight: bold;
          }
          img {
            margin-left: 10px;
            width: 26px;
          }
        }
        .sale {
          color: gray;
          font-size: 14px;
        }
      }
    }
    .no{
      justify-content: center;
    }
  }
}
</style>